<template>
	<view>
		<u-navbar title="消息" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
			leftIconColor="#E0DDDA" titleStyle="color:#333" bgColor="#E0DDDA"></u-navbar>
		<view class="new_box mart flex_dq" data-url="/pagesMy/setting/notice" @click="allJump">
			<view class="notice">
				<image src="../../static/icon/i_news.png" mode=""></image>
				<text class="notice_txt"
					v-if="overallNews.is_all_read_number!=0">{{overallNews.is_all_read_number>99?'99+':overallNews.is_all_read_number}}</text>
			</view>
			<view class=" flex_Z">
				<text class="f36 zts marb">公告</text>
				<text class="f28 c6">{{gonggao}}</text>
			</view>
		</view>
		<view class="new_box flex_dq" data-url="/pagesMy/setting/notification" @click="allJump">
			<view class="notice">
				<image src="../../static/icon/system.png" mode=""></image>
				<text class="notice_txt"
					v-if="overallNews.message_is_read_number!=0">{{overallNews.message_is_read_number>99?'99+':overallNews.message_is_read_number}}</text>
			</view>
			<view class=" flex_Z">
				<text class="f36 zts marb">系统通知</text>
				<text class="f28 c6">{{content}}</text>
			</view>
		</view>
		<view class="new_box flex_dq" data-url="/pagesMy/chat/grouplist" @click="allJump">
			<view class="notice">
				<image src="/static/image/qunliao.png" mode=""></image>

			</view>
			<view class=" flex_Z">
				<text class="f36 c6 marb">我的群聊</text>

			</view>
		</view>
		<view class="new_box flex_dq" @click="gochat(item.conversationId)" v-for="item in group" :key="item.id">
			<view class="notice">
				<image :src="item.lastMessage.ext.groupheadimg" mode=""></image>
				<text class="notice_txt"
					v-if="item.unReadCount!=0">{{item.unReadCount> 99 ?'99+':item.unReadCount}}</text>

			</view>
			<view class=" flex_Z">
				<text class="f36 zts marb">{{item.lastMessage.ext.groupname}}</text>
				<text class="f28 slh c4"
					v-if="item.lastMessage.type=='txt'">{{item.lastMessage.ext.nickname}}:{{item.lastMessage.msg}}</text>
				<text class="f28 c4" v-if="item.lastMessage.type=='img'">{{item.lastMessage.ext.nickname}}:[图片]</text>
				<text class="f28 c4" v-if="item.lastMessage.type=='video'">{{item.lastMessage.ext.nickname}}:[视频]</text>
				<text class="f28 c4" v-if="item.lastMessage.type=='audio'">{{item.lastMessage.ext.nickname}}:[语言]</text>
			</view>
			<image v-if="item.marks" src="../../static/image/pingbi.png"
				style="width: 40rpx;height: 42rpx;position: absolute;top: 50rpx;right: 40rpx;" mode=""></image>
		</view>

		<!-- 		<view class="" data-url="/pagesMy/chat/chat" @click="allJump">
			去群聊
		</view> -->
		<!-- 				<view class="new_box flex_dq">
			<view class="notice">
				<image src="../../static/icon/system.png" mode=""></image>
				<text class="notice_txt"  v-if="overallNews.message_is_read_number!=0">{{overallNews.message_is_read_number>99?'99+':overallNews.message_is_read_number}}</text>
			</view> 
			<view class=" flex_Z" data-url="/pagesMy/setting/notification" @click="allJump"> 
				<text class="f36 c0 marb">我的群聊</text>
				<text class="f28 c4">{{content}}</text>
			</view>
		</view>
		<view class="new_box flex_dq">
			<view class="notice">
				<image src="../../static/icon/system.png" mode=""></image>
				<text class="notice_txt"  v-if="overallNews.message_is_read_number!=0">{{overallNews.message_is_read_number>99?'99+':overallNews.message_is_read_number}}</text>
			</view> 
			<view class=" flex_Z" data-url="/pagesMy/setting/notification" @click="allJump"> 
				<text class="f36 c0 marb">我的好友</text>
				<text class="f28 c4">{{content}}</text>
			</view>
		</view> -->
		<!-- <view class="light"></view> -->
	</view>
</template>

<script>
	import {
		messagesindex
	} from "../../api/setting.js"
	import {
		getuserinfo
	} from "../../api/index.js"
	import {
		memberGroupList
	} from "../../api/hx.js"
	import WebIM from "../../utils/WebIM.js"
	export default {
		data() {
			return {
				xiaoxi: '585',
				overallNews: [],
				content: "",
				gonggao: '',
				group: [],
				newArray: [],
				groupid: [],
				userinfo: {},
				nums: "",
				num1: "",
			}
		},
		// onLoad() {
		// 	this.getoverallNews()
		// },
		onShow() {
			this.getmsg()
			this.newArray = []
			this.getoverallNews()
			// this.login()
			// this.groupdetail()
			// this.getuser()
			this.getgrouplist()
			this.getlist()

		},
		methods: {
			getlist() {
				memberGroupList({}).then(res => {
					if (res.code == 1) {
						this.list = res.data
					}
				})
			},
			login() {
				let that = this
				var options = {
					user: that.userinfo.id.toString(),
					accessToken: that.userinfo.hx_im_token,
					appKey: uni.WebIM.config.appkey
				};
				console.log(options, "登陆数据")
				uni.setStorageSync("hx_token", that.userinfo.hx_im_token)
				uni.WebIM.conn.open(options).then(res => {

				})
				// console.log("登录成功")

				// console.log("登录成功")

			},
			gochat(id) {
				uni.navigateTo({
					url: "/pagesMy/chat/chat?id=" + id
				})
			},
			getuser() {
				getuserinfo().then(res => {
					console.log(res)
					if (res.code == 1) {
						this.userinfo = res.data
						this.login()
					}
				})
			},
			getmsg() {
				let that = this
				uni.WebIM.conn.addEventHandler("onMessage", {
					onMessage: function(ress) {
						console.log(ress)
						setTimeout(() => {
							that.getgrouplist()
						}, 1500)
						// console.log("qwdqwd", ress)
					}

				})
				uni.WebIM.conn.addEventHandler("onError", {
					onError: function(ress) {
						console.log("qdqdqdqds", ress)
						if (ress.type == 28 || ress.type == 32 || ress.type == 39 || ress.type == 1 || ress
							.type == 700) {
							console.log("异常")
							that.getuser()
						}
						if (ress.type == 16) {
							that.getuser()
							uni.$u.tosat("网络异常")
						}
						console.log(ress, "失败")
						// that.getgrouplist()
						// console.log("qwdqwd", ress)
					}

				})
				// uni.WebIM.conn.addEventHandler("onTextMessage", {
				// 	onImageMessage: function(ress) {
				// 		setTimeout(()=>{
				// 			that.getgrouplist()
				// 		},1500)
				// 		// console.log("qwdqwd", ress)
				// 	}

				// })
				// uni.WebIM.conn.addEventHandler("onVideoMessage", {
				// 	onVideoMessage: function(ress) {
				// 		setTimeout(()=>{
				// 			that.getgrouplist()
				// 		},1500)
				// 		// console.log("qwdqwd", ress)
				// 	}

				// })

			},
			getgrouplist() {
				// uni.WebIM.conn.logOut().then(res=>{
				// 	console.log(res)
				// })

				uni.WebIM.conn.getServerConversations({
					pageSize: 50,
					cursor: ''
				}).then(res => {
					const data = {
						...res
					}
					console.log("%c>>>会话列表", "color:#6ad1c7", data)
					// console.log("会话列表", res)
					this.nums = 0;
					this.group = data.data.conversations
					for (let i = 0; i < this.group.length; i++) {
						if (this.group[i].marks) {
							this.nums = 0
							this.group[i].unReadCount = 0
							return this.group
						} else {
							this.nums += this.group[i].unReadCount
						}

						// this.addlist.push(this.group[i].conversationId)
						// 将name和avatar一起push到新数组中

					}
					if (this.nums + this.num1 > 0) {
						uni.setTabBarBadge({
							index: 3,
							text: (this.nums + this.num1 > 99 ? '99+' : this.nums + this.num1).toString()
						})
					} else {
						uni.hideTabBarRedDot({
							index: 3,
						})
					}

					console.log(this.nums)
					// console.log(this.group)
				})
			},
			allJump(e) {
				let {
					url
				} = e.currentTarget.dataset
				uni.navigateTo({
					url: url
				})
			},
			getoverallNews() {
				messagesindex().then(res => {
					console.log(res);
					if (res.code == 1) {
						if (Number(res.data.message_number) > 0) {
							uni.setTabBarBadge({
								index: 3,
								text: (res.data.message_number)
							})
						} else {
							uni.hideTabBarRedDot({
								index: 3,
							})
						}
						this.num1 = Number(res.data.message_number)
						this.overallNews = res.data
						if (res.data.new_notice) {
							this.gonggao = res.data.new_notice.title
						} else {
							this.gonggao = '暂无新公告'
						}
						if (res.data.new_message) {
							this.content = res.data.new_message.content
						} else {
							this.content = '暂无新通知'
						}
					}
				})
			}
		},
	}
</script>
<style>
	page {
		background: #E0DDDA;
	}
</style>
<style scoped>
	.new_box {
		position: relative;
		width: 100%;
	}

	.notice {
		position: relative;
	}

	.notice>image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin: 0 22rpx;
	}

	.notice_txt {
		position: absolute;
		top: 4rpx;
		right: 16rpx;
		font-size: 24rpx;
		color: #ffffff;
		background: red;
		padding: 6rpx 16rpx;
		border-radius: 40rpx;
	}

	.zts {
		color: #A68A64;
	}

	.mart {
		margin-top: 20rpx;
	}

	.marb {
		margin-bottom: 6rpx;
	}

	.light {
		width: 300rpx;
		height: 300rpx;
		border-radius: 50%;
		background: #ffffff60;
		box-shadow: 0px 0px 30px 30px rgba(255, 255, 255, 1);
		margin: 120rpx auto;
	}

	.slh {
		width: 500rpx;
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
	}
	
</style>